<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@page import="web.Start"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Trends Timeline</title>
<link rel="stylesheet"
	href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"
	type="text/css"></link>
<link rel="stylesheet" type="text/css"
	href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css"></link>
<script
	src="http://static.simile.mit.edu/timeline/api-2.3.0/timeline-api.js?bundle=true"
	type="text/javascript"></script>
<script type="text/javascript">
  function onLoad() {
		var eventSource = new Timeline.DefaultEventSource();
		var bandInfos = [
		 Timeline.createBandInfo({
			 eventSource:    eventSource,
			 date:           "Jan 01 2008 00:00:00 GMT",
			 width:          "70%", 
			 intervalUnit:   Timeline.DateTime.DAY, 
			 intervalPixels: 100
		 }),
		 Timeline.createBandInfo({
			 overview:       true,
			 eventSource:    eventSource,
			 date:           "Jan 01 2008 00:00:00 GMT",
			 width:          "30%", 
			 intervalUnit:   Timeline.DateTime.YEAR, 
			 intervalPixels: 200
		 })
		];
		bandInfos[1].syncWith = 0;
		bandInfos[1].highlight = true;

		tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
		Timeline.loadXML("XML/timelineTrends.xml", function(xml, url) { eventSource.loadXML(xml, url); });
	}
  </script>
</head>
<body onload="onLoad();">
<div id="my-timeline" style="width: 1300px; height: 430px;"></div>
</body>
</html>